<template>
  <div class="cart-bottom-bar">
    <!-- 全选按钮 -->
    <div class="cart-check-all">
      <check-button
        ref="btnState"
        @click.native="checkAllHanlder"
        :is-checked="checkAll"
      />
    </div>
    <!-- 文字 -->
    <div class="cart-check-text">
      <p>全选</p>
    </div>
    <!-- 计算 -->
    <div class="cart-goods-counter">
      <span
        >合计: <i class="price">¥{{ countPrice }}</i></span
      >
    </div>
    <!-- 提交订单并统计商品数量 -->
    <div class="cart-submit-order" @click="submitOrder">
      <span>提交订单({{ checkNumber }})</span>
    </div>
  </div>
</template>

<script>
import CheckButton from 'components/content/CheckButton/CheckButton.vue'
import * as types from '../../../store/mutations-types'
import { mapGetters } from 'vuex'

export default {
  name: 'CartBottomBar',
  props: {},
  components: {
    CheckButton
  },
  data () {
    return {}
  },
  created () {},
  mounted () {},
  computed: {
    ...mapGetters({
      checkNumber: 'goodsCheckedNum',
      checkAll: 'checkAllBtnState',
      countPrice: 'countGoodsPrice'
    })
  },
  methods: {
    checkAllHanlder () {
      // console.log('点击了全选按钮')
      // 取得全选按钮当前的状态,
      let state = this.$refs.btnState.isChecked
      // 打击全选按钮后, 所有子商品选项的done = state取反
      this.$store.commit(types.EDIT_CHECK_ALL_STATE, !state)
    },

    // 点击提交
    submitOrder () {
      // 取得全选按钮当前的状态,
      let state = this.$refs.btnState.isChecked
      this.$emit('submitOrder', state)
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.cart-bottom-bar {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 50px;
  width: 100%;
  height: 50px;
  box-shadow: 0 -1px 1px rgb(100 100 100 / 30%);

  .cart-check-all {
    width: 25px;
    height: 25px;
    margin: 0 10px;
  }

  .cart-check-text {
    font-size: 14px;
    color: #000;
  }

  .cart-goods-counter {
    flex: 1;
    text-align: right;

    span {
      color: #000;
      font-size: 14px;

      .price {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-high-text);
      }
    }
  }

  .cart-submit-order {
    text-align: center;
    margin: 0 5px;

    span {
      display: block;
      width: 120px;
      height: 40px;
      border-radius: 20px;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      background-color: #fc5231;
    }
  }
}
</style>
